<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            
        }
        .box{
            width: 680px;
            margin: 0 auto;
            height: 650px;
            border: 1px solid;
            padding:30px;
            box-sizing: border-box;
          
        }
        ul{
              padding: 0;
        }
        li img{
            width: 100px;
            
        }
        li{
            display: flex;
            margin-bottom: 10px;
        }
        .num{
            width: 10px;
        }
        div{
            width: 300px;
        }
        .foot{
            display: flex;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
        
        </ul>
        <div class="foot">
            <div><input class="alls" type="checkbox">全选</div>
            <div>总价：<span class=""></span></div>
            <div>结算（<span>5</span>）</div>
        </div>
    </div>

    <script>
        let goodslist = [
            {
                id:1,
                // 数量
                num:2,
                goodsname:'爱因斯坦的大脑',
                // 价格
                price:7.49,
                //选中状态
                type:true,
                img:'https://q0.itc.cn/q_70/images01/20250309/62df628368ed4f14b290743a71fa7b09.jpeg'
            },
            {
                id:2,
                // 数量
                num:2,
                goodsname:'爱因斯坦的大脑',
                // 价格
                price:7.49,
                //选中状态
                type:false,
                img:'https://q0.itc.cn/q_70/images01/20250309/62df628368ed4f14b290743a71fa7b09.jpeg'
            },
            {
                id:3,
                // 数量
                num:2,
                goodsname:'爱因斯坦的大脑',
                // 价格
                price:7.49,
                //选中状态
                type:true,
                img:'https://q0.itc.cn/q_70/images01/20250309/62df628368ed4f14b290743a71fa7b09.jpeg'
            }
        ]
        // 修改数量
        function setnum(e,id) {
            // console.log(e,item);
            let index = goodslist.findIndex(item=>item.id==id)
            goodslist[index].num +=e
            if (goodslist[index].num <=1) {
                goodslist[index].num=1
            }
            setdom()  
        }
        // 删除方法
        function removegoods(id) {
            // 获取选中元素的下标
            let index = goodslist.findIndex(item=>item.id==id)
            // 根据下标删除元素
            goodslist.splice(index,1)
            setdom()

        }
        // 修改选中方法
        function settype(id,e) {
            // e.target.checked  用户点击是选中框的状态
            // console.log(id,e.target.checked);
            let index = goodslist.findIndex(item=>item.id==id)
            goodslist[index].type = e.target.checked

            // 调用设置方法
            setall()
            
            
        }
        // 设置全选状态
        let alls = document.querySelector('.alls')

        alls.onclick=function(){
            // 选中框的状态
            // console.log(this.checked);
            goodslist.forEach(item=>item.type = this.checked)
            setdom()           
        }
        function setall(params) {
            // 全选状态 当所有商品都被选中后 底部全选被确定 否则不被确定
        //    console.log( goodslist.every(item=>item.type));
            alls.checked =  goodslist.every(item=>item.type)
            alls.checked = goodslist.every(function(item){
                return item.type
            })
            // 计算总价
              // type为选中的元素
                // goodslist.filter(item=>item.type)
            // let sum = goodslist.filter(item=>item.type).reduce((pi,item)=>pi+item.price*item.num,0)
            let sum = 0
            // 计算数量
            let sumnum = 0
            goodslist.forEach(item=>{
                if (item.type) {
                    sum+= item.price*item.num
                    sumnum += item.num
                }
            })
            document.querySelector('allprice').innerHTML = sum
            document.querySelector('allnum').innerHTML = sumnum
        }

        // 渲染dom
        function setdom() {
            let lis = ''
            goodslist.forEach((item,index)=>{
                console.log(item);     
                lis+=`
                      <li>
              <input onclick="settype(${item.id},event)" type="checkbox" ${item.type?'checked':''}>
             <img src="${item.img}" alt="">
            <div>
                <p>${item.goodsname}</p>
                <p>价格：￥${item.price}</p>
                <p><button onclick="setnum(-1,${item.id})">-</button><input class="num" value="${item.num}" type="text"><button onclick="setnum(1,${item.id})">+</button></p>
            </div>
            <button onclick="removegoods(${item.id})">删除</button>
            </li>
                `
            })
            document.querySelector('ul').innerHTML = lis


        }
        setdom()
    </script>
</body>
</html>